<template>
	<div class="detail">
		<!-- 头部 -->
		<van-nav-bar title="文章详情" left-arrow @click-left="$router.back('/')" />
		<!-- 文章 -->
		<div>
			<div class="detail01">
				<van-image round width="15vw" height="15vw" :src="list.avatar" />
				<span>{{list.nickname}}</span>
				<button>关注</button>
			</div>
			<div class="detail02">
				<h2>{{list.title}}</h2>
				<p>{{list.content}}</p>
			</div>
			<div class="detailimg" v-for="item,index in list.imageSrc">
				<img :src="item">
			</div>
		</div>
		<!-- 评论列表 -->
		<div class="comment">
			<div class="solid"></div>
			<h4>评论区</h4>
			<div v-if="list.comment==0">
				<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
					description="暂无评论" />
			</div>
			<div v-else>
				<div v-for="item,index in commentlist">
					<div class="detail03">
						<van-image round width="15vw" height="15vw" :src="item.info.avatar" />
						<!-- <span></sapn><br> -->
						<p>
							<span>{{item.info.nickname}}</span>
							<br />
							{{item.content}}
							<br />
							<span>{{item.create_time}}</span>
							<span>回复{{item.like_count}}</span>
						</p>
					</div>
				</div>
				<p style="text-align: center;color: #999;">没有更多数据了</p>
			</div>

		</div>
		<!-- 评论回复 -->
		<div class="comments">
			<div class="comments01">
				<div class="input" @click="popupShow=true">
					写评论
				</div>
				<div class="comments02">
					<van-icon :badge="list.comment>0?list.comment:''" name="other-pay" />
					<van-icon @click="activeFav" :badge="list.fav>0?list.fav:''" :class="list.is_fav?'active':''"
						name="star-o" />
					<van-icon @click="activeLike" :badge="list.like>0?list.like:''"
						:class="list.is_like==true?'active':''" name="good-job-o" />
					<van-icon name="share-o" />
				</div>
			</div>
			<div>
				<van-popup v-model="popupShow" closeable position="bottom" :style="{ height: '24%' }">
					<div style="padding-top: 20px;">
						<van-field v-model.trim="content" rows="4" type="textarea" placeholder="请输入留言" show-word-limit>
						</van-field>
						<van-button type="primary" block @click="submit">发布</van-button>
					</div>

				</van-popup>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		detail,
		comment,
		like,
		unlike,
		add_fav,
		remove_fav,
		add_comment
	} from '@/api/detail.js'
	import {
		getArticledetail
	} from '@/api/home.js'
	import {
		mapState
	} from 'vuex'
	import {
		getuserInfoAPI
	} from '@/store/modules/user'
	export default {
		name: 'DetailView',
		data() {
			return {
				list: [],
				commentlist: [],
				popupShow: false,
				content: '',
				reply_comment_id: '', //回复的id
				comment_type: 0, //0是回复文章 1是回复评论
			}
		},
		computed: {
			...mapState('UESR', ['uid', 'userInfo']),
			article_id() {
				return this.$route.query.id;
			},
			user_id() {
				return this.$store.state.UESR.uid;
			},
			create_time() {
				let time = this.commentlist.create_time
			}
		},
		created() {
			this.detail();
			this.comment()
		},
		methods: {
			//发布评论
			submit() {
				let {
					user_id,
					article_id,
					content,
					reply_comment_id,
					comment_type
				} = this;
				if (content.length === 0) {
					this.$toast('内容为空')
					return
				}
				add_comment({
					user_id,
					article_id,
					content,
					reply_comment_id,
					comment_type
				}).then(res => {
					console.log(res)
					this.$toast(res.msg)
					if (res.code === 0) {
						let {
							userInfo: {
								avatar,
								nickname,
								username
							}
						} = this;
						if (comment_type == 0) {
							let commonList = this.commentlist;

							let createCommentData = {
								_id: res.data.id,
								user_id,
								article_id,
								comment_type,
								reply_comment_id,
								reply_num: 0,
								content,
								create_time: +new Date(),
								like_count: 0,
								is_like: false,
								info: {
									avatar,
									nickname,
									username,
								},
								_is_create: 1,
							};
 
							this.list.comment++;
							commonList.list.unshift(createCommentData);
							commonList.skip++;
							this.content = "";
							// let commentdata = {
							// 	_id: res.data.id,
							// 	user_id,
							// 	article_id,
							// 	comment_type,
							// 	reply_comment_id,
							// 	reply_num: 0,
							// 	content: '',
							// 	create_time: +new Date(),
							// 	like_count: 0,
							// 	is_like: false,
							// 	info: {
							// 		avatar,
							// 		nickname,
							// 		username
							// 	}
							// }
							// this.list.comment++
							// this.list.unshift(commentdata)
							// this.content = ''
						} else if (comment_type == 1) {
							console.log(this.$parent)

							let {
								currentIndex
							} = this;

							this.$bus.$emit('changeArticle', currentIndex)

							this.content = "";
						}
					}
					this.popupShow = false
				})
			},
			//文章收藏
			activeFav() {
				let {
					list: {
						is_fav
					},
					user_id,
					article_id
				} = this;
				let api = is_fav ? remove_fav : add_fav;
				api({
					user_id,
					article_id
				}).then(res => {
					this.$toast(res.msg)
					if (res.code == 0) {
						this.list.is_fav = !is_fav
					}
				})
			},
			//文章点赞
			activeLike() {
				let {
					list: {
						is_like
					},
					user_id,
					article_id
				} = this;
				let api = is_like ? unlike : like;
				api({
					user_id,
					article_id
				}).then(res => {
					this.$toast(res.msg)
					if (res.code == 0) {
						this.list.is_like = !is_like
					}
				})

				// if (is_like === false) {
				// 	//点赞
				// 	like({
				// 		user_id,
				// 		article_id
				// 	}).then(res => {
				// 		this.$toast(res.msg)
				// 		this.list.is_like=!is_like
				// 		console.log(res)
				// 	})
				// } else {
				// 	//取消点赞
				// 	unlike({
				// 		user_id,
				// 		article_id
				// 	}).then(res => {
				// 		this.$toast(res.msg)
				// 		this.list.is_like=!is_like
				// 		console.log(res)
				// 	})
				// }

				// if (this.$store.state.UESR.isLogin) {
				// 	this.$toast('请先登录')
				// 	setTimeout(() => {
				// 		this.$router.push('/login')
				// 	}, 300);
				// 	return
				// }
			},
			detail() {
				let {
					article_id,
					user_id
				} = this;
				detail({
					article_id,
					user_id,
				}).then(res => {
					console.log(res)
					if (res.code === 0) {
						this.list = res.data;
					}
				})
			},
			comment() {
				let {
					article_id,
					skip,
					limit,
					user_id
				} = this;
				comment({
					article_id,
					skip,
					limit,
					user_id
				}).then(res => {
					console.log(res)
					this.commentlist = res.data
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.active {
		color: red;
	}

	.detail {
		padding: 0 10px;
	}

	.detail01 button {
		float: right;
		margin-top: 20px;
	}

	.detail01 span {
		position: relative;
		bottom: 34px;
		left: 10px;
		color: red;
	}

	.detail02 h2 {
		padding: 10px 0;
	}

	.detail02 p {
		/* padding: 10px 0; */
		padding-bottom: 10px;
	}

	.detailimg img {
		width: 95vw;
	}

	.comment {
		margin-bottom: 60px;
	}

	.solid {
		border-top: 1px solid #f4f4f4;
		margin-top: 30px;
		margin-bottom: 10px;
	}

	.detail03 {
		padding: 15px;
		display: flex;
	}

	.detail03 span {
		color: #bcbcbc;
		flex: 1;
	}

	.detail03 span:last-child {
		background-color: #bcbcbc;
		color: #000;
		border-radius: 10px;
		padding: 0 2px;
	}

	.comments {
		width: 100%;
		height: 50px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
		border-top: solid 1px #eee;
	}

	.comments01 {
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: left;

		.input {
			width: 130px;
			height: 30px;
			margin-top: 10px;
			border: 1px solid #999;
			border-radius: 15px;
			color: #bcbcbc;
			text-align: center;
			line-height: 32px;
		}

		.comments02 {
			margin-left: 30px;
			font-size: 28px;
			margin-top: 10px;
			color: #999;

			.van-icon:before {
				padding: 0 10px;
			}
		}
	}

	.van-info {
		padding: 1px;
		position: absolute;
		top: 6px;
		right: 12px;
	}
</style>
